<template>
  <!--访客数据展示（原页面备份）-->
  <div class="contentRight" style="background-color: #f0f2f5;">
    <a-row type="flex" class="marginBottom" style="width: 100%;flex-wrap: nowrap;">
      <!--第一排左侧-->
      <a-col flex="60%" style="background-color: #fff;border-radius: 2px;">
        <a-card size="small" title="访客预约实时数据" :bordered="false">
          <!--<a slot="extra" href="#">右上角</a>-->
          <!--顶部统计-->
          <a-row :gutter="10">
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <a-statistic
                  title="今日预约总人数"
                  :value="reservationsAllNumbers"
                  suffix="人"
                  class="demo-class"
                >
                </a-statistic>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <a-statistic
                  title="今日到访总人数"
                  :value="visitorsAllNumbers"
                  suffix="人"
                  class="demo-class"
                >
                </a-statistic>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <a-statistic
                  title="今日访问中总人数"
                  :value="allVisitingNumbers"
                  suffix="人"
                  class="demo-class"
                >
                </a-statistic>
              </a-card>
            </a-col>
          </a-row>
        </a-card>

        <!--地图-->
        <div class="divbox">
          <div class="mapflex flex" style="">
            <div class="baseMapBg"></div>
            <!--<img src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/baseMap.jpg" style="height: 90%"/>-->
          </div>
        </div>
      </a-col>

      <a-col flex="10px"></a-col>
      <!--第一排右侧-->
      <a-col flex="auto" >
        <a-card size="small" title="安亭基地" :bordered="false" style="margin-bottom: 10px">
          <template slot="extra">
            <a-dropdown>
              <a  class="ant-dropdown-link menuA">
                {{antingAreaName}}<a-icon type="down" />
              </a>
              <a-menu slot="overlay" @click="handleClick">
                <a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.areaName">
                  {{item.areaName}}
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>

          <!--顶部统计-->
          <a-row :gutter="10">
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #eeeeee;"></span>
                  <a-statistic
                    title="今日预约总人数"
                    :value="reservationsNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #0ebc5b;"></span>
                  <a-statistic
                    title="今日到访总人数"
                    :value="visitorsNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #FFA500;"></span>
                  <a-statistic
                    title="今日访问中总人数"
                    :value="antingVisitingNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
          </a-row>

          <div style="position: relative;min-height: 100px">
            <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex" v-if="antingData.length == 0">
              <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;" class="flex">此区域未查询到数据</div>
            </div>
            <!--图表-->
            <div v-else id="container" class="charthuan"></div>
          </div>

        </a-card>

        <a-card size="small" title="银川基地" :bordered="false">
          <template slot="extra">
            <a-dropdown>
              <a  class="ant-dropdown-link menuA">
                {{yinchuanAreaName2}}<a-icon type="down" />
              </a>
              <a-menu slot="overlay" @click="handleClickYinchuan2">
                <a-menu-item class="menuA" v-for="item in yinchuanAreaList" :key="item.id" :value="item.areaName">
                  {{item.areaName}}
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>

          <!--顶部统计-->
          <a-row :gutter="10">
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #eeeeee;"></span>
                  <a-statistic
                    title="今日预约总人数"
                    :value="ycreservationsNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #0ebc5b;"></span>
                  <a-statistic
                    title="今日到访总人数"
                    :value="ycvisitorsNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #FFA500;"></span>
                  <a-statistic
                    title="今日访问中总人数"
                    :value="yinchuanVisitingNumbers"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
          </a-row>

          <div style="position: relative;min-height: 100px">
            <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex" v-if="yinchuanData.length == 0">
              <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;" class="flex">此区域未查询到数据</div>
            </div>
            <!--图表-->
            <div v-else id="containerYinchuan2" class="charthuan"></div>
          </div>
        </a-card>

      </a-col>
    </a-row>

    <!--第二排-->
    <a-row type="flex" class="marginBottom" style="width: 100%">
      <a-col flex="50%" style="background-color: #fff;border-radius: 2px;">
        <a-card size="small" title="太仓基地" :bordered="false">
          <template slot="extra">
            <a-dropdown>
              <a  class="ant-dropdown-link menuA">
                {{taicangAreaName}}<a-icon type="down" />
              </a>
              <a-menu slot="overlay" @click="handleClickTaiCang">
                <a-menu-item class="menuA" v-for="item in taicangAreaAll" :key="item.id" :value="item.name">
                  {{item.name}}
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>

          <!--顶部统计-->
          <a-row :gutter="10">
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #eeeeee;"></span>
                  <a-statistic
                    title="今日预约总人数"
                    :value="yuyueCount"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #0ebc5b;"></span>
                  <a-statistic
                    title="今日到访总人数"
                    :value="daofangCount"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card size="small" :bordered="false" style="text-align: center;">
                <div class="flex1">
                  <span class="span-color" style="background-color: #FFA500;"></span>
                  <a-statistic
                    title="今日访问中总人数"
                    :value="noOutCount"
                    suffix="人"
                    class="demo-class"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
          </a-row>

          <div style="position: relative;min-height: 100px">
            <div style="width: 100%;height: 100%;position: absolute;overflow: hidden;" class="flex" v-if="taicangData.length == 0">
              <div style="width: 100%;height: 100%;position: absolute;background-color: #fff;z-index: 100;" class="flex">此区域未查询到数据</div>
            </div>
            <!--图表-->
            <div v-else id="containerTaiCang" class="chartzhu"></div>


          </div>
        </a-card>
      </a-col>
      <a-col flex="10px"></a-col>
      <a-col flex="auto" style="background-color: #fff;border-radius: 2px;">
        <a-card size="small" title="湘潭基地" :bordered="false">
          <div class="areaNotOpened">
            该区域暂未开通
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import reservationApi from "@/api/reservation";
import { Chart, registerShape } from '@antv/g2';

export default {
  components: {

  },
  name:'',
  data() {
    return {
      loading1: false,
      aningAreaAll:[],
      antingChart: null,  //安亭数据图形对象
      antingAreaName:"全部",
      antingAreaId: "",
      unapprovedNumbers: 0 , //安亭未审批人数
      visitorsNumbers: 0 , //安亭到访总人数
      reservationsNumbers: 0 , //安亭预约总人数
      antingVisitingNumbers: 0 , //安亭访问中人数

      reservationsAllNumbers: 0 , //所有基地预约总人数
      visitorsAllNumbers: 0 , //所有基地到访总人数
      unapprovedAllNumbers: 0 , //所有基地未审批人数
      allVisitingNumbers: 0 , //所有基地访问中人数

      intervalId:null,   //定时器，定时刷新页面
      antingData: [],

      // 银川基地
      ycunapprovedNumbers: 0 , //银川未审批人数
      ycvisitorsNumbers: 0 , //银川到访总人数
      ycreservationsNumbers: 0 , //银川预约总人数
      yinchuanVisitingNumbers: 0 , //银川访问中人数
      yinchuanData: [],
      yinchuanAreaList:[],
      yinchuanAreaName2: "全部",
      yinchuanAreaId2: "",
      yinchanChart: null,  //银川数据图形对象

      // 太仓基地
      taicangData: [
        // { name: '到访人数', areaOrDoor: '二厂', count: 12 },
        // { name: '到访人数', areaOrDoor: '三厂', count: 23 },
        // { name: '到访人数', areaOrDoor: '四厂', count: 23 },
        // { name: '到访人数', areaOrDoor: '五厂', count: 0 },
        // { name: '到访人数', areaOrDoor: '六厂', count: 0 },
        // { name: '到访人数', areaOrDoor: '七厂', count: 0 },
        //
        // { name: '预约人数', areaOrDoor: '二厂', count: 18 },
        // { name: '预约人数', areaOrDoor: '三厂', count: 28 },
        // { name: '预约人数', areaOrDoor: '四厂', count: 18 },
        // { name: '预约人数', areaOrDoor: '五厂', count: 0 },
        // { name: '预约人数', areaOrDoor: '六厂', count: 0 },
        // { name: '预约人数', areaOrDoor: '七厂', count: 28 },
      ],
      taicangAreaAll:[
        {id: 1, name:"按区域"},
        {id: 2, name:"按门"},
      ],
      taicangChart: null,  //太仓数据图形对象
      taicangAreaName:"按区域",
      taicangAreaId: "1",
      noApproveCount: 0 , //太仓未审批人数
      daofangCount: 0 , //太仓到访总人数
      yuyueCount: 0 , //太仓预约总人数
      noOutCount: 0 , //银川访问中人数
    }
  },
  beforeMount(){
      // this.aningAreaAll = reservationApi.getAningAreaAll();
      // console.log(this.aningAreaAll);
      this.getAntingAreaList();   //获取安亭区域
      this.getYinchuanAreaList();   //获取银川区域
  },
  created(){
    this.dataRefreh();
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  },
  mounted() {
    this.fristAntingData();
  },
  methods: {
    // 获取安亭基地的区域
    async getAntingAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
      // console.log(res.data);
      if (res.data.success){
        this.aningAreaAll = [{areaName: "全部", id: ""}];
        this.aningAreaAll = [...this.aningAreaAll,...res.data.result];
        // console.log(this.aningAreaAll);
      } else {
        this.$message.error(res.data.message);
      }

    },
    // 获取银川基地的区域
    async getYinchuanAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 102})
      // console.log(res.data);
      if (res.data.success){
        this.yinchuanAreaList = [{areaName: "全部", id: ""}];
        this.yinchuanAreaList = [...this.yinchuanAreaList,...res.data.result];
        // this.yinchuanAreaName2 = this.yinchuanAreaList[0].areaName;
        // this.yinchuanAreaId2 = this.yinchuanAreaList[0].id;
        // console.log(this.yinchuanAreaList);
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        this.getAllVisitCase(); //加载数据函数
        this.loadDataRegularly();
      }, 20000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    async fristAntingData(){
      this.getAllVisitCase();
      await this.getAntingVisitCase();
      await this.getYinchuanVisitCase();
      await this.getTaiCangVisitCase();
      if (this.antingData.length != 0){
        this.pieChart1()
      }
      if (this.yinchuanData.length != 0){
        this.pieChartYinchuan()
      }
      if (this.taicangData.length != 0){
        this.pieChartTaiCang()
      }

    },
    // 安亭基地切换区域
    async handleClick(e) {
      // console.log(e)
      this.antingAreaName = e.item.value;
      this.antingAreaId = e.key;
      await this.getAntingVisitCase();
      // console.log(this.antingData);
      if (this.antingData.length != 0){
        this.antingChart.data(this.antingData);
        this.antingChart.render();
      }
    },
    // 银川基地切换区域
    async handleClickYinchuan2(e) {
      // console.log(e);
      this.yinchuanAreaName2 = e.item.value;
      this.yinchuanAreaId2 = e.key;
      await this.getYinchuanVisitCase();
      if (this.yinchuanData.length != 0){
        this.yinchanChart.data(this.yinchuanData);
        this.yinchanChart.render();
      }
    },
    // 太仓基地切换区域
    async handleClickTaiCang(e) {
      // console.log(e)
      this.taicangAreaName = e.item.value;
      this.taicangAreaId = e.key;
      await this.getTaiCangVisitCase();    // 重新获取数据
      // console.log(this.taicangData);
      if (this.taicangData.length != 0){
        this.taicangChart.data(this.taicangData);
        this.taicangChart.render();
      }
    },
    // 定时加载数据
    async loadDataRegularly() {
      await this.getAntingVisitCase();
      await this.getYinchuanVisitCase();
      await this.getTaiCangVisitCase();
      // console.log(this.antingData);
      if (this.antingData.length != 0){
        this.antingChart.data(this.antingData);
        this.antingChart.render();
      }
      if (this.yinchuanData.length != 0){
        this.yinchanChart.data(this.yinchuanData);
        this.yinchanChart.render();
      }
      if (this.taicangData.length != 0){
        this.taicangChart.data(this.taicangData);
        this.taicangChart.render();
      }

    },
    // 请求安亭基地数据
    async getAntingVisitCase() {
      // this.loading = true;
      // console.log(this.antingAreaId);
      let params = {
        visitBaseId : 100,
        visitAreaId: this.antingAreaId
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        this.antingData = [];
        let respData = resp.data.result;
        if (respData.length != 0){
          let dataarr = respData.filter(el=>{
            return el.population > 0
          });
          // console.log(dataarr);
          if (dataarr.length == 0){
            this.antingData = [];
            this.unapprovedNumbers = 0 ; //未审批人数
            this.visitorsNumbers = 0 ; //到访总人数
            this.reservationsNumbers = 0 ; //预约总人数
            this.antingVisitingNumbers = 0;  //访问中人数
          } else {
            respData.forEach( el =>{
              if (el.visitorState == "今日预约总人数"){
                this.reservationsNumbers = el.population ; //预约总人数
                this.antingData[0] = {
                  type: '今日预约总人数',
                  value: el.population
                };
              } else if (el.visitorState == "今日到访总人数"){
                this.visitorsNumbers = el.population ; //今日到访总人数
                this.antingData[1] = {
                  type: '今日到访总人数',
                  value: el.population
                };
              } else if (el.visitorState == "今日访问中总人数"){
                this.antingVisitingNumbers = el.population ; //今日未审批人数
                this.antingData[2] = {
                  type: '今日访问中总人数',
                  value: el.population
                };
              }
            });
          }
          // console.log(this.antingData);
        }

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 请求银川基地数据
    async getYinchuanVisitCase() {
      let params = {
        visitBaseId : 102,
        visitAreaId: this.yinchuanAreaId2
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        this.yinchuanData = [];
        let respData = resp.data.result;
        if (respData.length != 0){
          let dataarr = respData.filter(el=>{
            return el.population > 0
          });
          // console.log(dataarr);
          if (dataarr.length == 0){
            this.yinchuanData = [];
            this.ycunapprovedNumbers = 0 ; //未审批人数
            this.ycvisitorsNumbers = 0 ; //到访总人数
            this.ycreservationsNumbers = 0 ; //预约总人数
          } else {
            respData.forEach( el =>{
              if (el.visitorState == "今日预约总人数"){
                this.ycreservationsNumbers = el.population ; //预约总人数
                this.yinchuanData[0] = {
                  type: '今日预约总人数',
                  value: el.population
                };
              } else if (el.visitorState == "今日到访总人数"){
                this.ycvisitorsNumbers = el.population ; //今日到访总人数
                this.yinchuanData[1] = {
                  type: '今日到访总人数',
                  value: el.population
                };
              } else if (el.visitorState == "今日访问中总人数"){
                this.yinchuanVisitingNumbers = el.population ; //今日未审批人数
                this.yinchuanData[2] = {
                  type: '今日访问中总人数',
                  value: el.population
                };
              }
            });
          }
          // console.log(this.antingData);
        }

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 请求太仓基地数据，获取太仓基地数据
    async getTaiCangVisitCase() {
      // this.loading = true;
      // console.log(this.taicangAreaId);
      let params = {
        visitBaseId : 20003,
        lx: this.taicangAreaId
      };
      let resp = await reservationApi.getVisitStatistics(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        this.taicangData = [];
        let respData = resp.data.result;
        this.taicangData = respData.areaAndDoor;  //柱状图数据
        this.yuyueCount = respData.allCount[0].yuyueCount; //预约总人数
        this.daofangCount = respData.allCount[0].daofangCount; //到访总人数
        this.noApproveCount = respData.allCount[0].noApproveCount;//未审批人数
        this.noOutCount = respData.allCount[0].noOutCount;  //访问中人数

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 请求所有基地数据
    async getAllVisitCase() {
      // this.loading = true;
      let params = {
        visitBaseId : "",
        visitAreaId: ""
      };
      let resp = await reservationApi.getVisitorVisitCase(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        let respData = resp.data.result;
        respData.forEach( el => {
          if (el.visitorState == "今日预约总人数") {
            this.reservationsAllNumbers = el.population; //今日预约总人数
          } else if (el.visitorState == "今日到访总人数") {
            this.visitorsAllNumbers = el.population; //今日到访总人数
          } else if (el.visitorState == "今日访问中总人数") {
            this.allVisitingNumbers = el.population; //今日未审批人数
          }
        });

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 安亭访客数据饼图
    pieChart1() {
      // const antingData = [
      //   { type: '今日预约总人数', value: 1 },
      //   { type: '今日到访总人数', value: 0 },
      //   { type: '今日未审批人数', value: 0 },
      // ];

      const chart = new Chart({
        container: 'container',
        autoFit: true,
        height: 500,
      });
      this.antingChart = chart;
      chart.data(this.antingData);
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.8,
      });
      chart.tooltip(false);
      chart
        .interval()
        .adjust('stack')
        .position('value')
        .color('type',['#eeeeee','#0ebc5b', '#FFA500', '#FF0000'])
        .shape('slice-shape');

      chart.render();
    },
    // 银川访客数据饼图
    pieChartYinchuan() {
      // const antingData = [
      //   { type: '今日预约总人数', value: 1 },
      //   { type: '今日到访总人数', value: 0 },
      //   { type: '今日未审批人数', value: 0 },
      // ];

      const chart = new Chart({
        container: 'containerYinchuan2',
        autoFit: true,
        height: 500,
      });
      this.yinchanChart = chart;
      chart.data(this.yinchuanData);
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.8,
      });
      chart.tooltip(false);
      chart
        .interval()
        .adjust('stack')
        .position('value')
        .color('type',['#eeeeee','#0ebc5b', '#FFA500', '#FF0000'])
        .shape('slice-shape');

      chart.render();
    },
    // 太仓访客数据饼图
    pieChartTaiCang() {
      // const antingData = [
      //   { type: '今日预约总人数', value: 1 },
      //   { type: '今日到访总人数', value: 0 },
      //   { type: '今日未审批人数', value: 0 },
      // ];

      const chart = new Chart({
        container: 'containerTaiCang',
        autoFit: true,
        height: 300,
        padding: 30,
      });
      this.taicangChart = chart;
      chart.data(this.taicangData);
      chart.scale('count', {
        nice: true,
      });
      chart.axis('areaOrDoor', {
        tickLine: null,
      });

      chart.axis('count', {
        label: {
          formatter: (val) => {
            return  " " + " " + " " + val
          },
        },
      });
      // chart.tooltip({
      //   showMarkers: false,
      //   shared: true,
      // });
      chart.tooltip(false);
      chart.interaction('element-active');

      chart.legend(false);
      chart
        .interval()
        .position('areaOrDoor*count')
        .color('name',  ['#0ebc5b', '#eeeeee'])
        .label('count', {
          offset: 10,
        }).adjust([
        {
          type: 'dodge',
          marginRatio: 0,
        },
      ]);

      chart.render();
    },



  },
}
</script>
